<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>学员信息列表</title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
</head>
<style>
    * {
        padding: 0;
        margin: 0;
        box-sizing: border-box;
    }

    .btn-primary {
        width: 80%;
    }

    ul {
        list-style: none;

    }

    ul li,
    .p1 {
        display: flex;
        padding-top: 10px;
        padding-bottom: 10px;
        border-top: 1px #f6f6f6 solid;
        padding-left: 20px;
    }

    ul li:first-child {
        background-color: #999;
    }

    ul li span,
    .p1 span {
        display: block;
        width: 33.333333%;


    }

    .p1 span {
        font-weight: bolder;
    }

    ul li:last-child {
        border-bottom: 1px #f6f6f6 solid;
    }
</style>

<body>

    <div class="jumbotron jumbotron-fluid">
        <div class="container text-center">
            <h1 class="display-4">学员信息表</h1>
            <p class="lead text-center">1803</p>
        </div>
    </div>

    <div class="container">
        <div class="pp">
            <h3>
                添加
            </h3>
            <!-- <input type="text" class="form-control"  id="inputPassword2" placeholder="姓名"> -->

            <form onsubmit="return false">

                <div class="row">
                    <div class="form-group col-md-3">

                        <input type="text" class="form-control" id="address" placeholder="请输入名字">
                    </div>
                    <div class="form-group col-md-3">

                        <select id="state" class="form-control">
                            <option value="男">男</option>
                            <option value="女">女</option>
                        </select>
                    </div>
                    <div class="form-group col-md-3">

                        <input type="number" class="form-control" id="address2" placeholder="请输入您的年龄">
                    </div>




                    <div class="form-group col-md-3">
                        <button type="submit" id="btn1" class="btn btn-primary">添加</button>
                    </div>
                </div>
            </form>
        </div>

    </div>
    <div class="container">
        <h2>
            列表
        </h2>
        <p class="p1">
            <span>
                姓名
            </span>
            <span>
                性别
            </span>
            <span>
                年龄
            </span>
        </p>
        <ul id="list">

        </ul>
    </div>

    <script>


        function l() {
            var list;
            if (window.XMLHttpRequest) {
                //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
                list = new XMLHttpRequest();
            }
            else {
                // IE6, IE5 浏览器执行代码
                list = new ActiveXObject("Microsoft.XMLHTTP");
            }
            list.onreadystatechange = function () {
                if (list.readyState == 4 && list.status == 200) {

                    console.log(list.responseText);
                    
                    var json = JSON.parse(list.responseText);
                    
                    console.log(json.data);

                    for (let i = 0; i < json.data.length; i++) {

                        var li = document.createElement("li");

                        var spanname = document.createElement("span");
                        spanname.innerHTML = json.data[i].studentName;

                        var spansex = document.createElement("span");
                        spansex.innerHTML = json.data[i].sex;

                        var spanage = document.createElement("span");
                        spanage.innerHTML = json.data[i].age;

                        li.appendChild(spanname);
                        li.appendChild(spansex);
                        li.appendChild(spanage);
                        console.log(li);

                        document.querySelector("#list").appendChild(li);
                    }
                }
            }
            list.open("GET", "http://localhost/ajaxApi/public/index.php/index/student/student", true);
            list.send();
        }
        l();



        document.querySelector("#btn1").addEventListener('click', function () {

            var n = document.querySelector("#address").value;
            console.log(n);
            
            var s = document.querySelector("#state").value;
            console.log(s);

            var nn = document.querySelector("#address2").value;
            console.log(nn);
            if (n != "" && nn != "") {
                var xmlhttp;
                    //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
                    xmlhttp = new XMLHttpRequest();
            
                xmlhttp.onreadystatechange = function () {
                    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {

                        console.log(xmlhttp.responseText);

                        document.querySelector("#list").innerHTML = "";
                        l();

                    }
                }
                xmlhttp.open("GET", "http://localhost/ajaxApi/public/index.php/index/student/addStudent?studentName=" + n + "&sex=" + s + "&age=" + nn, true);
                xmlhttp.send();
            } else {
                alert("不可为空");
            }


        })

    </script>




    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.slim.min.js"></script>
    <script src="https://cdn.bootcss.com/popper.js/1.14.7/umd/popper.min.js"></script>
    <script src="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</body>

</html>